<style>
	@import url("../../common/css/order.css");
</style>
<template>
	<view class="main_page">
		<!--头部-->
		<commonHeader :titleName="titleName" :isShowReturn="false"></commonHeader>
		<view class="order_content" v-if="distributioningOrder.length > 0 ">
			<!--进行中的订单-->
			<view class="distribute_order">
				<view class="order_item" v-for="item in distributioningOrder">
					<view class="order_status_title">
						<view class="order_status_title_name">
							<view class="status_line_left"></view>
							<span v-if="item.orderStatus == 0">订单待支付</span>
							<span v-if="item.orderStatus == 1">待骑手接单</span>
							<span v-if="item.orderStatus == 2">骑手配送中</span>
							<span v-if="item.orderStatus == 3">订单待评价</span>
							<span v-if="item.orderStatus == 4">订单已完成</span>
							<view class="status_line_right"></view>
						</view>
						<view class="order_date" v-if="item.orderStatus == 2">
							<view class="order_date_title">预计送达{{item.qsTime}}</view>
						</view>
					</view>
					<view class="rider_order_info">
						<view class="rider_info" v-if="item.orderStatus >= 2">
							<avatar :size="80" :marginTop="26" style="float: left;"></avatar>
							<view class="user_info">
								<span class='user_name'>{{item.qsName}}</span>
								<span class="user_pf">
									<image src="../../static/pf.png" mode="aspectFill" v-for="i in item.qsScore"></image>
								</span>
							</view>
							<image class="user_tel" src="../../static/tel.png" mode="aspectFill" @click="callPhone(item.qsPhone)"></image>
						</view>
						<view class="receive_address_info">
							<image src="../../static/receive.png" mode="aspectFill"></image>
							<view class="address_text">
								<span class="address">{{item.address}}</span>
								<span class="user_info">{{item.contacts}}  {{item.contactPhone}}</span>
							</view>
						</view>
					</view>
					<view class="order_goods_info" v-if="item.orderType == 1">
						<view>
							<view class="business_name" >
								需求内容
							</view>
							<view class="goods_list">
								<view class="goods_item" >
									<span class="goods_name no_goods">{{item.customOrderInfo}}</span>
								</view>
							</view>
						</view>
						<view class="order_contact">
							<view class="order_pay">
								<span class="order_pay_title" v-if="item.payStatus == 0">应付:</span>
								<span class="order_pay_title" v-if="item.payStatus == 1">实付:</span>
								<span class="order_pay_money">￥{{item.amount}}</span>
							</view>
						</view>
					</view>
					<view class="order_goods_info" v-if="item.orderType == 0">
						<view v-for="items in item.orderGoodsInfo">
							<view class="business_name" >
								{{items.shopName}}
							</view>
							<view class="goods_list">
								<view class="goods_item" v-for="items_goods in items.goodsInfoList">
									<span class="goods_name">{{items_goods.goodsName}}</span>
									<span class="goods_num">x{{items_goods.goodsNumber}}</span>
									<span class="goods_money">￥{{items_goods.amount}}</span>
								</view>
							</view>
						</view>
						<view class="order_contact">
							<view class="order_pay">
								<span class="order_pay_title" v-if="item.payStatus == 0">应付:</span>
								<span class="order_pay_title" v-if="item.payStatus == 1">实付:</span>
								<span class="order_pay_money">￥{{item.amount}}</span>
							</view>
						</view>
					</view>
					
					<view class="order_info">
						<view class="order_info_item">
							<view class="left_title">
								订单编号
							</view>
							<view class="right_copy" @click="copyOrderSn(item.orderNo)">
								<span class="copy_btn">复制</span>
							</view>
							<view class="right_content">
								{{item.orderNo}}
							</view>
						</view>
						<view class="order_info_item">
							<view class="left_title">
								下单时间
							</view>
							<view class="right_content">
								{{item.orderDate}}
							</view>
						</view>
						<view class="order_info_item">
							<view class="left_title">
								跑腿费
							</view>
							<view class="right_content">
								¥{{item.platformLaborFee}}
							</view>
						</view>
						<view class="order_info_item">
							<view class="left_title">
								备注
							</view>
							<view class="right_content">
								{{item.remark}}
							</view>
						</view>
						<view class="order_info_item top_bottom_info">
							<view class="kefu" v-if="item.payStatus >= 1">
								<image src="../../static/kf.png" mode="aspectFill"></image>
								<span class="kf_name">客服</span>
							</view>
							
							<view class="finish_order" v-if="item.orderStatus == 0" @click="payOrder(item.orderNo)">
								立即支付
							</view>
							<view class="finish_order" v-if="item.orderStatus == 2" @click="receiveOrder(item.orderNo)">
								确认收货
							</view>
							<!-- <view class="finish_order" v-if="item.orderStatus == 4">
								再来一单
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!--历史订单-->
			<view class="history_order" v-if="historyOrder.length > 0">
				<view class="order_title">历史订单</view>
				<view class="order_item old" v-for="item in historyOrder">
					<view class="order_time_finish" >
						<span class="finish_time" v-if="item.orderStatus ==3 || item.orderStatus == 4">15分钟内</span>
						<span class="finish_time_flag" v-if="item.orderStatus ==3 || item.orderStatus == 4">送达</span>
						<span class="order_status" v-if="item.orderStatus == 0">未支付</span>
						<span class="order_status" v-if="item.orderStatus == 1">待接单</span>
						<span class="order_status" v-if="item.orderStatus == 2">配送中</span>
						<span class="order_status" v-if="item.orderStatus == 3">配送完成</span>
						<span class="order_status" v-if="item.orderStatus == 4">已完成</span>
					</view>
					<view class="receive_address_info" style="border-bottom: 1rpx solid #EEEEEE;">
						<image src="../../static/receive.png" mode="aspectFill"></image>
						<view class="address_text" style="margin-top: 22rpx;">
							<span class="address">{{item.address}}</span>
							<span class="user_info">{{item.contacts}}  {{item.contactPhone}}</span>
						</view>
					</view>
					<view class="order_goods_info" style="left: 0;margin-top: 24rpx;border-bottom: 1rpx solid #EEEEEE; border-radius: 0;">
						<view v-if="item.orderType == 0">
							<view class="goods_list" style="border-bottom: 0px;" v-for="items in item.orderGoodsInfo">
								<view class="b_name">
									{{items.shopName}}
								</view>
								<view class="goods_item" v-for="items_goods in items.goodsInfoList">
									<span class="goods_name">{{items_goods.goodsName}}</span>
									<span class="goods_num">x{{items_goods.goodsNumber}}</span>
									<span class="goods_money">￥{{items_goods.amount}}</span>
								</view>
							</view>
						</view>
						<view v-else>
							<view class="goods_list" style="border-bottom: 0px;">
								<view class="b_name">
									需求内容
								</view>
								<view class="goods_item">
									<span class="goods_name no_goods">{{item.customOrderInfo}}</span>
								</view>
							</view>
						</view>						
						<view class="order_contact">
							<view class="order_pay" style="margin: 0rpx 0 34rpx 0;">
								<span class="order_pay_title" v-if="item.payStatus == 0">应付款:</span>
								<span class="order_pay_title" v-if="item.payStatus == 1">实付款:</span>
								<span class="order_pay_money">￥{{item.amount}}</span>
							</view>
						</view>
					</view>
					<view class="order_info" style="left: 0;">
						<view>
							<view class="order_info_item history">
								<view class="left_title">
									订单编号
								</view>
								<view class="right_copy">
									<span class="copy_btn" @click="copyOrderSn(item.orderNo)">复制</span>
								</view>
								<view class="right_content">
									{{item.orderNo}}
								</view>
								
							</view>
							<view class="order_info_item history">
								<view class="left_title">
									下单时间
								</view>
								<view class="right_content">
									{{item.orderDate}}
								</view>
							</view>
							<view class="order_info_item history" v-if="item.orderStatus ==3 || item.orderStatus == 4">
								<view class="left_title">
									送达时间
								</view>
								<view class="right_content">
									2021-05-01 09:10  
								</view>
							</view>
							<view class="order_info_item history" v-if="item.orderStatus ==3 || item.orderStatus == 4">
								<view class="left_title">
									配送骑手
								</view>
								<view class="right_content">
									{{item.qsName}}
								</view>
							</view>
							<view class="order_info_item history">
								<view class="left_title">
									跑腿费
								</view>
								<view class="right_content">
									¥{{item.platformLaborFee}}
								</view>
							</view>
						</view>
						
						<view class="order_info_item history" style="border-bottom: 0px;height: 105rpx;" v-if="item.orderStatus ==3">
							<view class="kefu" v-if="item.payStatus >= 1">
								<image src="../../static/kf.png" mode="aspectFill"></image>
								<span class="kf_name">客服</span>
							</view>
							<view class="oneMoreOrder">
								再来一单
							</view>
							<view class="orderEvaluate" @click="evaluateOrder(item)">
								评价
							</view>
						</view>
						<view class="order_info_item history" style="border-bottom: 0px;height: 105rpx;" v-if="item.orderStatus ==4">
							<view class="kefu" v-if="item.payStatus >= 1">
								<image src="../../static/kf.png" mode="aspectFill"></image>
								<span class="kf_name">客服</span>
							</view>
						<!-- 	<view class="oneMoreOrder">
								再来一单
							</view> -->
						</view>
						<view class="order_info_item history" style="border-bottom: 0px;height: 105rpx;" v-if="item.payStatus == 0">
							<view class="oneMoreOrder" @click="payOrder(item.orderNo)">
								立即支付
							</view>
						</view>
						
					<!-- 	<view class="putItAway">
							<view class="put_btn">
								<span>收起详情</span>
								<image src="../../static/up.png" mode="aspectFill"></image>
							</view> -->
							<!-- <view class="put_btn" >
								<span>查看详情</span>
								<image src="../../static/down1.png" mode="aspectFill"></image>
							</view> -->
						<!-- </view> -->
					</view>
				</view>
			</view>
		</view>
		<!--底部导航-->
		<tabBar :pagePath="'/pages/order/index'"></tabBar>
	</view>
</template>

<script>
	import commonHeader from '@/components/common-header/common_header_title.vue';
	import avatar from '@/components/user/avatar.vue'
	export default{
		components:{
			commonHeader,avatar
		},
		data(){
			return {
				titleName:'订单列表',
				distributioningOrder:[],//配送中的订单信息
				historyOrder:[],//历史订单
				s_index:-1,
				s_flag:true
			}
		},
		onShow(){
			this.getActiveOrder()
			this.getHistoryOrder()
		},
		methods:{
			evaluateOrder(orderInfo){//评价页面
				this.$uniNavigateTo('../../pages/order/evaluate/evaluate?orderId='+orderInfo.orderId+'&name='+orderInfo.qsName+'&time='+orderInfo.qsTime+'&avatar=')
			},
			seeDetail(e){
				console.log(e)
			},
			//获取当前活动订单
			getActiveOrder(){
				let that = this
				this.$api.order.activeOrderList()
				.then(res => {
					if(res.code == 200){
						that.distributioningOrder = res.data
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			},
			//获取历史订单
			getHistoryOrder(){
				let that = this
				this.$api.order.historyOrderList()
				.then(res => {
					if(res.code == 200){
						that.historyOrder = res.data
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			},
			//复制订单SN
			copyOrderSn(orderSn){
				uni.setClipboardData({
					data:orderSn,//要被复制的内容
					success:()=>{//复制成功的回调函数
					  uni.showToast({//提示
						title:"复制成功"
					  })
					},
				})
			},
			//打电话
			callPhone(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			//订单付款
			payOrder(orderSn){
				let that = this
				let postJson = {orderNo:orderSn}
				this.$api.order.orderSnPay(postJson)
				.then(res => {
					if(res.code == 200){
						this.$payCommon.xcxPay(res.data)
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			},
			//确认收货
			receiveOrder(orderSn){
				let that = this
				let postJson = {orderNo:orderSn}
				this.$api.order.distributionOrder(postJson)
				.then(res => {
					if(res.code == 200){
						this.$commonJs.waitFunction.waitRelaunch(res.msg,'/pages/order/index')
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err => {
					this.$commonJs.showToast.showNoneToast(err)
				})
			}
		}
	}
</script>
